<script setup lang="ts">
import type { CategoryItem } from '@/types/home.d.ts'
const props = defineProps<{
  list: CategoryItem[]
}>()
</script>
<template>
  <view class="category">
    <navigator
      v-for="item in list"
      :key="item.id"
      class="category-item"
      url="/pages/index/index"
      open-type="navigate"
      hover-class="navigator-hover"
    >
      <image class="icon" mode="aspectFill" :src="item.icon" />
      <text class="text">{{ item.name }}</text>
    </navigator>
  </view>
</template>
<style lang="scss" scoped>
.category {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding-top: 20rpx;
  background: rgb(250, 127, 146, 0.1);
  .category-item {
    width: 20%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
    .icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      border: solid 1rpx rgb(250, 127, 146);
    }
    .text {
      color: #666;
      font-size: 26rpx;
    }
  }
}
</style>
